import { createApp } from "vue";
import ElementPlus from "element-plus";
import { Control } from "ol/control";
import { once } from "lodash-es";

class RotateButton extends Control {
  constructor(options = {}) {
    //借助Vue3的createApp创建控件的element
    const element = createApp({
      template: `
      <div class="cl-rotate-control" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <el-button class="rotate-button">
          旋转180°
        </el-button>
      </div>`,
    })
      .use(ElementPlus)
      .mount(document.createElement("div")).$el;

    // 调用父类Control的构造函数，将控件的element传入
    super({
      element,
      // render: once(() => {
      //   console.log("RotateButton render");
      // }),
    });

    // 给控件的element添加点击事件
    element
      .querySelector(".el-button")
      .addEventListener("click", this.addRotate.bind(this));

    this.rotateDeg = (options.rotateDeg || 180) * (Math.PI / 180);
  }

  // 旋转地图
  addRotate() {
    const view = this.getMap().getView();
    const rotate = view.getRotation();
    view.animate({
      rotation: rotate + this.rotateDeg,
    });
  }
}

class CustomControl extends Control {
  constructor(options = {}) {
    const element = document.createElement("div");
    super({
      element,
      render: once(() => {
        // 当render函数被调用时，控件已经添加到地图上了，因此可以获取地图实例。
        console.log(this.getMap());
      }),
    });

    element.addEventListener(
      "click",
      this.handlerClick.bind(this), // 将控件的this绑定到handlerClick方法
      false
    );
  }
  handlerClick() {
    this.getMap(); //获取地图实例
  }
}

export default RotateButton;
